<template>
  <div>
    <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page"  v-model="form" ref="crud" :span-method="spanMethod" :cellStyle="cellStyle" :summary-method="getSummary"  :search.sync="search" @on-load="onLoad" >
      <template slot="menuLeft">
        <el-button type="primary" @click="transfer">字符串反转</el-button>
      </template>
      <template slot-scope="{ disabled, size }" slot="organizationDateSearch">
        <el-date-picker v-model="search.month" type="month" format="yyyy-MM" valueFormat="yyyy-MM"> </el-date-picker>
      </template>
        <template slot="histroyCountHeader">
          <span>自定义内容</span>
        </template>
    </avue-crud>
  </div>
</template>

<script>


export default {
  components: {},
  data() {
    return {
      form: {},
      query: {},
      loading: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      search: {},
      selectionList: [],
      isShow: 1,
      option: {
        height: "auto",
        calcHeight: 15,
        tip: false,
        searchShow: true,
        searchMenuSpan: 12,
        searchSpan: 6,
        border: false,
        index: true,
        menu: false,
        addBtn:false,
        viewBtn: true,
        selection: false,
        dialogClickModal: false,
        stripe: false,
        showSummary:true,
        indexLabel: "序号",
        headerAlign: "center",
        align: "right",
        refreshBtn: false,
        columnBtn: false,
        searchShowBtn: false,
        column: [
          {
            label: "统计月份",
            prop: "month",
            hide: true,
            search: true,
            type: "month",
            format: "yyyy-MM",
            valueFormat: "yyyy-MM",
          },
          {
            label: "监督站",
            prop: "id",
            type: "select",
            minWidth: 180,
            overHidden: true,
            align: "left",
            filterable: true,
            search: true,
            props: {
              label: "title",
              value: "id",
            },
          },
          {
            label: "监督工程项目类别",
            prop: "engineeringCategory",
            align: 'center',
            width:140
          },
          {
            label: "工程类型",
            prop: "projectType",
            align: 'center',
          },
          {
            label: "往年结转",
            children: [
              {
                label: "项目数（个）",
                prop: "histroyCount",
                width: 110,
                headerslot: true
              },
              {
                label: "项目投资额（万元）",
                prop: "histroyInvestment",
                width: 150
              },
            ]
          },
          {
            label: "新报监",
            children: [
              {
                label: "项目数（个）",
                children: [
                  {
                    label: "本月",
                    prop: "addMCount",
                  },
                  {
                    label: "本年累计",
                    prop: "addYearCount",
                  },
                ]
              },
              {
                label: "项目投资额（万元）",
                children: [
                  {
                    label: "本月",
                    prop: "addMInvestment",
                  },
                  {
                    label: "本年累计",
                    prop: "addYearInvestment",
                  },
                ]
              },
            ]
          },
          {
            label: "本年度",
            children: [
              {
                label: "监督项目总数（个）",
                prop: "superviseYearCount",
                width:120,
              },
              {
                label: "监督工程项目投资总额（万元）",
                prop: "superviseYearInvestment",
                width:170,
              }
            ]
          },
          {
            label: "竣工验收",
            children: [
              {
                label: '项目数（个）',
                children: [
                  {
                    label: '本月',
                    prop:'completeMCount'
                  },
                  {
                    label: '本年累计',
                    prop:'completeYearCount',
                  }
                ]
              },
              {
                label: '项目投资额（万元）',
                children: [
                  {
                    label: '本月',
                    prop:'completeMInvestment',
                  },
                  {
                    label: '本年累计',
                    prop:'completeYearInvestment',
                  }
                ]
              }
            ]
          },
          {
            label:'本月',
            children: [
              {
                label:'在监项目数（个）',
                prop:'superviseMCount',
                width: 120
              }
            ]
          },
          {
            label:'监督工作开展情况',
            children: [
              {
                label: '办理监督注册证书（份）',
                prop: 'registerMCount',
                width: 150
              },
              {
                label: '下发监督计划（份）',
                prop: 'planMCount',
                width: 140
              },
              {
                label: '编制监督方案（份）',
                prop: 'schemeMCount',
                width: 140
              },
              {
                label: '出具监督报告（份）',
                prop: 'reportMCount',
                width: 140
              }
            ]
          }
        ],
      },
      data: [],
    }
  },
  computed: {
    ids() {
      let ids = []
      this.selectionList.forEach((ele) => {
        ids.push(ele.id)
      })
      return ids.join(",")
    },
  },
  methods: {
    onLoad(page, params = {}) {

      let res = {
        "code": 200,
        "success": true,
        "data": [
          {
            "id": "",
            "fullName": "",
            "engineeringCategory": "油气储运",
            "projectType": "一类",
            "histroyCount": 1,
            "histroyInvestment": 1,
            "addMCount": 0,
            "addYearCount":0,
            "addMInvestment": 0,
            "addYearInvestment": 0,
            "superviseYearCount": "",
            "superviseYearInvestment": "",
            "completeMCount": 0,
            "completeYearCount": 0,
            "completeMInvestment": 0,
            "completeYearInvestment": 0,
            "superviseMCount": "",
            "registerMCount": 0,
            "planMCount": 0,
            "schemeMCount": 0,
            "reportMCount": 0,
            "month": "",
            "ylastday": "",
            "mlastday": "",
            "yfirstday": "",
            "mfirstday": ""
          },
          {
            "id": "",
            "fullName": "",
            "engineeringCategory": "油气储运",
            "projectType": "二类",
            "histroyCount": 2,
            "histroyInvestment": 2,
            "addMCount": 0,
            "addYearCount": 0,
            "addMInvestment": 0,
            "addYearInvestment": 0,
            "superviseYearCount": "",
            "superviseYearInvestment": "",
            "completeMCount": 0,
            "completeYearCount": 0,
            "completeMInvestment": 0,
            "completeYearInvestment": 0,
            "superviseMCount": "",
            "registerMCount": 0,
            "planMCount": 0,
            "schemeMCount": 0,
            "reportMCount": 0,
            "month": "",
            "ylastday": "",
            "mlastday": "",
            "yfirstday": "",
            "mfirstday": ""
          },
          {
            "id": "",
            "fullName": "",
            "engineeringCategory": "油气储运",
            "projectType": "三类",
            "histroyCount": 3,
            "histroyInvestment": 3,
            "addMCount": 0,
            "addYearCount": 0,
            "addMInvestment": 0,
            "addYearInvestment": 0,
            "superviseYearCount": "",
            "superviseYearInvestment": "",
            "completeMCount": 0,
            "completeYearCount": 0,
            "completeMInvestment": 0,
            "completeYearInvestment": 0,
            "superviseMCount": "",
            "registerMCount": 0,
            "planMCount": 0,
            "schemeMCount": 0,
            "reportMCount": 0,
            "month": "",
            "ylastday": "",
            "mlastday": "",
            "yfirstday": "",
            "mfirstday": ""
          },
          {
            "id": "",
            "fullName": "",
            "engineeringCategory": "油气储运",
            "projectType": "四类",
            "histroyCount": 4,
            "histroyInvestment": 4,
            "addMCount": 0,
            "addYearCount": 0,
            "addMInvestment": 0,
            "addYearInvestment": 0,
            "superviseYearCount": "",
            "superviseYearInvestment": "",
            "completeMCount": 0,
            "completeYearCount": 0,
            "completeMInvestment": 0,
            "completeYearInvestment": 0,
            "superviseMCount": "",
            "registerMCount": 0,
            "planMCount": 0,
            "schemeMCount": 0,
            "reportMCount": 0,
            "month": "",
            "ylastday": "",
            "mlastday": "",
            "yfirstday": "",
            "mfirstday": ""
          },
          {
            "id": "",
            "fullName": "",
            "engineeringCategory": "油气储运",
            "projectType": "合计",
            "histroyCount": 10,
            "histroyInvestment": 10,
            "addMCount": 0,
            "addYearCount": 0,
            "addMInvestment": 0,
            "addYearInvestment": 0,
            "superviseYearCount": "",
            "superviseYearInvestment": "",
            "completeMCount": 0,
            "completeYearCount": 0,
            "completeMInvestment": 0,
            "completeYearInvestment": 0,
            "superviseMCount": "",
            "registerMCount": 0,
            "planMCount": 0,
            "schemeMCount": 0,
            "reportMCount": 0,
            "month": "",
            "ylastday": "",
            "mlastday": "",
            "yfirstday": "",
            "mfirstday": ""
          },
          {
            "id": "",
            "fullName": "",
            "engineeringCategory": "油气田地面",
            "projectType": "一类",
            "histroyCount": 1,
            "histroyInvestment": 1,
            "addMCount": 0,
            "addYearCount": 0,
            "addMInvestment": 0,
            "addYearInvestment": 0,
            "superviseYearCount": "",
            "superviseYearInvestment": "",
            "completeMCount": 0,
            "completeYearCount": 0,
            "completeMInvestment": 0,
            "completeYearInvestment": 0,
            "superviseMCount": "",
            "registerMCount": 0,
            "planMCount": 0,
            "schemeMCount": 0,
            "reportMCount": 0,
            "month": "",
            "ylastday": "",
            "mlastday": "",
            "yfirstday": "",
            "mfirstday": ""
          },
          {
            "id": "",
            "fullName": "",
            "engineeringCategory": "油气田地面",
            "projectType": "二类",
            "histroyCount": 2,
            "histroyInvestment": 2,
            "addMCount": 0,
            "addYearCount": 0,
            "addMInvestment": 0,
            "addYearInvestment": 0,
            "superviseYearCount": "",
            "superviseYearInvestment": "",
            "completeMCount": 0,
            "completeYearCount": 0,
            "completeMInvestment": 0,
            "completeYearInvestment": 0,
            "superviseMCount": "",
            "registerMCount": 0,
            "planMCount": 0,
            "schemeMCount": 0,
            "reportMCount": 0,
            "month": "",
            "ylastday": "",
            "mlastday": "",
            "yfirstday": "",
            "mfirstday": ""
          },
          {
            "id": "",
            "fullName": "",
            "engineeringCategory": "油气田地面",
            "projectType": "三类",
            "histroyCount": 4,
            "histroyInvestment": 4,
            "addMCount": 0,
            "addYearCount": 0,
            "addMInvestment": 0,
            "addYearInvestment": 0,
            "superviseYearCount": "",
            "superviseYearInvestment": "",
            "completeMCount": 0,
            "completeYearCount": 0,
            "completeMInvestment": 0,
            "completeYearInvestment": 0,
            "superviseMCount": "",
            "registerMCount": 0,
            "planMCount": 0,
            "schemeMCount": 0,
            "reportMCount": 0,
            "month": "",
            "ylastday": "",
            "mlastday": "",
            "yfirstday": "",
            "mfirstday": ""
          },
          {
            "id": "",
            "fullName": "",
            "engineeringCategory": "油气田地面",
            "projectType": "四类",
            "histroyCount": 6,
            "histroyInvestment": 6,
            "addMCount": 0,
            "addYearCount": 0,
            "addMInvestment": 0,
            "addYearInvestment": 0,
            "superviseYearCount": "",
            "superviseYearInvestment": "",
            "completeMCount": 0,
            "completeYearCount": 0,
            "completeMInvestment": 0,
            "completeYearInvestment": 0,
            "superviseMCount": "",
            "registerMCount": 0,
            "planMCount": 0,
            "schemeMCount": 0,
            "reportMCount": 0,
            "month": "",
            "ylastday": "",
            "mlastday": "",
            "yfirstday": "",
            "mfirstday": ""
          },
          {
            "id": "",
            "fullName": "",
            "engineeringCategory": "油气田地面",
            "projectType": "合计",
            "histroyCount": 13,
            "histroyInvestment": 13,
            "addMCount": 0,
            "addYearCount": 0,
            "addMInvestment": 0,
            "addYearInvestment": 0,
            "superviseYearCount": "",
            "superviseYearInvestment": "",
            "completeMCount": 0,
            "completeYearCount": 0,
            "completeMInvestment": 0,
            "completeYearInvestment": 0,
            "superviseMCount": "",
            "registerMCount": 0,
            "planMCount": 0,
            "schemeMCount": 0,
            "reportMCount": 0,
            "month": "",
            "ylastday": "",
            "mlastday": "",
            "yfirstday": "",
            "mfirstday": ""
          },
          {
            "id": "",
            "fullName": "",
            "engineeringCategory": "炼油化工",
            "projectType": "一类",
            "histroyCount": 8,
            "histroyInvestment": 222230228888,
            "addMCount": 3,
            "addYearCount": 3,
            "addMInvestment": 2004444,
            "addYearInvestment": 2004444,
            "superviseYearCount": 11,
            "superviseYearInvestment": 222232233332,
            "completeMCount": 0,
            "completeYearCount": 0,
            "completeMInvestment": 0,
            "completeYearInvestment": 0,
            "superviseMCount": "",
            "registerMCount": 3,
            "planMCount": 0,
            "schemeMCount": 0,
            "reportMCount": 0,
            "month": "",
            "ylastday": "",
            "mlastday": "",
            "yfirstday": "",
            "mfirstday": ""
          },
          {
            "id": "",
            "fullName": "",
            "engineeringCategory": "炼油化工",
            "projectType": "二类",
            "histroyCount": 0,
            "histroyInvestment": 0,
            "addMCount": 0,
            "addYearCount": 0,
            "addMInvestment": 0,
            "addYearInvestment": 0,
            "superviseYearCount": "",
            "superviseYearInvestment": "",
            "completeMCount": 0,
            "completeYearCount": 0,
            "completeMInvestment": 0,
            "completeYearInvestment": 0,
            "superviseMCount": "",
            "registerMCount": 0,
            "planMCount": 0,
            "schemeMCount": 0,
            "reportMCount": 0,
            "month": "",
            "ylastday": "",
            "mlastday": "",
            "yfirstday": "",
            "mfirstday": ""
          },
          {
            "id": "",
            "fullName": "",
            "engineeringCategory": "炼油化工",
            "projectType": "三类",
            "histroyCount": 2,
            "histroyInvestment": 2000,
            "addMCount": 0,
            "addYearCount": 0,
            "addMInvestment": 0,
            "addYearInvestment": 0,
            "superviseYearCount": "",
            "superviseYearInvestment": "",
            "completeMCount": 0,
            "completeYearCount": 0,
            "completeMInvestment": 0,
            "completeYearInvestment": 0,
            "superviseMCount": "",
            "registerMCount": 0,
            "planMCount": 0,
            "schemeMCount": 0,
            "reportMCount": 0,
            "month": "",
            "ylastday": "",
            "mlastday": "",
            "yfirstday": "",
            "mfirstday": ""
          },
          {
            "id": "",
            "fullName": "",
            "engineeringCategory": "炼油化工",
            "projectType": "四类",
            "histroyCount": 0,
            "histroyInvestment": 0,
            "addMCount": 0,
            "addYearCount": 0,
            "addMInvestment": 0,
            "addYearInvestment": 0,
            "superviseYearCount": "",
            "superviseYearInvestment": "",
            "completeMCount": 0,
            "completeYearCount": 0,
            "completeMInvestment": 0,
            "completeYearInvestment": 0,
            "superviseMCount": "",
            "registerMCount": 0,
            "planMCount": 0,
            "schemeMCount": 0,
            "reportMCount": 0,
            "month": "",
            "ylastday": "",
            "mlastday": "",
            "yfirstday": "",
            "mfirstday": ""
          },
          {
            "id": "",
            "fullName": "",
            "engineeringCategory": "炼油化工",
            "projectType": "合计",
            "histroyCount": 10,
            "histroyInvestment": 222230230888,
            "addMCount": 3,
            "addYearCount": 3,
            "addMInvestment": 2004444,
            "addYearInvestment": 2004444,
            "superviseYearCount": 13,
            "superviseYearInvestment": 222232235332,
            "completeMCount": 0,
            "completeYearCount": 0,
            "completeMInvestment": 0,
            "completeYearInvestment": 0,
            "superviseMCount": "",
            "registerMCount": 3,
            "planMCount": 0,
            "schemeMCount": 0,
            "reportMCount": 0,
            "month": "",
            "ylastday": "",
            "mlastday": "",
            "yfirstday": "",
            "mfirstday": ""
          }
        ],
        "msg": "操作成功"
      } ;
      this.data = res.data
      this.data.map((obj)=>{
        for (let i in obj){
          obj[i] = obj[i] == '' ? 0 :  obj[i] //空格显示0
          // obj[i] =this.getFilterNum(obj[i]) //千位符
        }
      })

      // this.loading = true
      // selectStatistics(page.currentPage, page.pageSize, Object.assign(params, this.query)).then((res) => {
      //   const data = res.data.data
      //   this.page.total = data.total
      //   this.data = data.records
      //   this.loading = false
      //   this.selectionClear()
      // })
    },
    //合并行
    spanMethod({ row, column, rowIndex, columnIndex }){
       if (columnIndex == 1){
         if (rowIndex === 0) {
           return {
             rowspan: 15,
             colspan: 1
           }
         }else{
           return {
             rowspan: 0,
             colspan: 0
           }
         }
       }

      if (columnIndex == 2){
        if (rowIndex % 5 === 0) {
          return {
            rowspan: 5,
            colspan: 1
          }
        }else{
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    cellStyle({row,column,rowIndex,columnIndex}){
      // console.log("row:",row,'column:',column,"rowIndex:",rowIndex,'columnIndex:',columnIndex)
      // if (rowIndex % 4 === 0 && columnIndex >= 3) {
      //    return {
      //      background :'red'
      //    }
      // }
    },
    // 合计
    getSummary({ columns, data }) {
      console.log("columns:",columns)
      console.log("data:",data)
      const sums = [];
      if (columns.length > 0) {
        columns.forEach((column, index) => {
          if (['fullName', 'engineeringCategory', 'projectType'].includes(column.property)) {//过滤某些字段不参与计算
            sums[index] = '-'
          } else {
            let values = data.map((item,index) =>{
              // let num = item[column.property].replace(/,/g, '') ;
              if ((index+1) % 5 === 0){
                return  Number(item[column.property])
              }else{
                return  0
              }

            });

            console.log("column:",column,"values:",values)
            if (!values.every((value) => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr)
                if (!isNaN(value)) {
                  return prev + curr
                } else {
                  return prev
                }
              }, 0);
            }

          }
        });
      }
      return sums;
    },
    //千位符
    getFilterNum(value) {
      let res = '';
      let arr = (value+'').split('').reverse()
      console.log("arr:",arr)
      if(/^[0-9]+$/.test(value)){
        if(arr.length > 3){
          for(let i=0; i <= arr.length - 1; i++){
            res+=arr[i]
            if((i+1)%3==0){
              res+=',';
            }
          }
          let ret = res.split('').reverse().join('');
          const regex = /^\,/;
          if (regex.test(ret)) {
            ret = ret.substring(1); //如果第一个字符是',' 则删除
          }
          return ret;
        }else{
          return value;
        }
      }else{
        return value;
      }
    } ,
    transfer(){
      let array = '12345'.split('') ;
      console.log(" array.reverse():", array.reverse().join(''))
    }
  },
}
</script>

<style >
.rowBgCount{
  background: #DD4A68!important;
}
</style>
